{% extends "rbac/base.html" %}
{% load static %}

{% block title %}欢迎使用{% endblock %}

{% block breadcrumb_items %}
<li class="breadcrumb-item active" aria-current="page">欢迎页面</li>
{% endblock %}

{% block extra_css %}
<style>
.welcome-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 0;  /* 最小内边距 */
    margin-bottom: 1rem;  /* 进一步减少下边距 */
}

.menu-card {
    transition: all 0.3s ease;
    border: none;
    height: 100%;
    cursor: pointer;
}

.menu-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.menu-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.stats-card {
    border-radius: 15px;
    border: none;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-5px);
}

.time-greeting {
    font-size: 0.75rem;  /* 最小字体 */
    opacity: 0.8;
}

.user-avatar {
    width: 32px;  /* 最小头像 */
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;  /* 减小图标大小 */
}

.welcome-title {
    font-size: 1.2rem;  /* 最小标题 */
    font-weight: 600;
    margin-bottom: 0.1rem;  /* 最小边距 */
    line-height: 1.2;
}

.quick-stats {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.5rem;  /* 最小内边距 */
}

.compact-greeting {
    margin-bottom: 0;
    font-size: 0.7rem;  /* 最小字体 */
    line-height: 1.1;
}

.stats-number {
    font-size: 1rem;  /* 更小的统计数字 */
    font-weight: 600;
    margin-bottom: 0;
}

.stats-label {
    font-size: 0.65rem;  /* 最小标签字体 */
    opacity: 0.9;
}

/* 额外的紧凑样式 */
.container {
    padding-top: 0.5rem;
}

.section-title {
    font-size: 1.3rem;
    margin-bottom: 1rem !important;
    font-weight: 600;
}
</style>
{% endblock %}

{% block content %}
<div class="welcome-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="d-flex align-items-center">
                    <div class="user-avatar me-2">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <h1 class="welcome-title">
                            <span id="timeGreeting">欢迎回来</span>，{{ current_user.real_name|default:current_user.username }}！
                        </h1>
                        <p class="time-greeting mb-0" id="currentTime"></p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="quick-stats">
                    <div class="row text-center g-1">
                        <div class="col-6">
                            <div class="stats-number">{{ total_menus }}</div>
                            <div class="stats-label">可用模块</div>
                        </div>
                        <div class="col-6">
                            <div class="stats-number">{{ current_user.roles|length }}</div>
                            <div class="stats-label">我的角色</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    {% if menus %}
    <!-- 系统模块菜单 -->
    <div class="row">
        <div class="col-12">
            <h2 class="mb-3 section-title">
                <i class="fas fa-th-large text-primary me-2"></i>系统模块
            </h2>
        </div>
    </div>
    
    <div class="row g-3 mb-4">
        {% for menu in menus %}
        <div class="col-lg-4 col-md-6">
            <div class="card menu-card shadow-sm" onclick="accessMenu('{{ menu.url }}', '{{ menu.name }}')">
                <div class="card-body text-center p-4">
                    <div class="menu-icon text-{{ menu.color }}">
                        <i class="{{ menu.icon }}"></i>
                    </div>
                    <h4 class="card-title mb-2">{{ menu.name }}</h4>
                    {% if menu.description %}
                    <p class="card-text text-muted mb-3">{{ menu.description }}</p>
                    {% endif %}
                    
                    <!-- 权限角色显示 -->
                    <div class="mb-3">
                        {% for role in menu.required_roles.all %}
                        <span class="badge bg-{{ menu.color }} bg-opacity-10 text-{{ menu.color }} me-1">{{ role.name }}</span>
                        {% empty %}
                        <span class="badge bg-success bg-opacity-10 text-success">所有用户</span>
                        {% endfor %}
                    </div>
                    
                    <button class="btn btn-{{ menu.color }} btn-sm">
                        <i class="fas fa-arrow-right me-1"></i>进入系统
                    </button>
                </div>
                
                <!-- 菜单状态指示器 -->
                <div class="position-absolute top-0 end-0 p-2">
                    <div class="bg-{{ menu.color }} rounded-circle" style="width: 12px; height: 12px;"></div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- 无可用菜单时的提示 -->
    <div class="row">
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-lock fa-5x text-muted mb-4"></i>
                <h3 class="text-muted mb-3">暂无可用系统模块</h3>
                <p class="text-muted mb-4">您当前的角色暂时无法访问任何系统模块，请联系管理员分配相应权限。</p>
                <a href="{% url 'rbac:account_info' %}" class="btn btn-primary">
                    <i class="fas fa-user me-1"></i>查看我的账户信息
                </a>
            </div>
        </div>
    </div>
    {% endif %}
    
    <!-- 用户信息卡片 -->
    <div class="row mt-4">
        <div class="col-12">
            <h2 class="mb-3 section-title">
                <i class="fas fa-user-circle text-info me-2"></i>账户信息
            </h2>
        </div>
    </div>
    
    <div class="row g-4">
        <div class="col-md-4">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-user-tag text-primary fa-2x mb-3"></i>
                    <h5 class="card-title">我的角色</h5>
                    <div class="d-flex flex-wrap justify-content-center gap-1">
                        {% for role in current_user.roles %}
                        <span class="badge bg-primary">{{ role }}</span>
                        {% empty %}
                        <span class="text-muted">未分配角色</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-clock text-success fa-2x mb-3"></i>
                    <h5 class="card-title">登录信息</h5>
                    <p class="mb-1"><small class="text-muted">上次登录</small></p>
                    <p class="mb-1">{{ current_user.last_login|date:"Y-m-d H:i" }}</p>
                    <p class="mb-0"><small class="text-muted">本次登录时间</small></p>
                    <p class="mb-0" id="loginDuration">计算中...</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-cog text-warning fa-2x mb-3"></i>
                    <h5 class="card-title">快速操作</h5>
                    <div class="d-grid gap-2">
                        <a href="{% url 'rbac:account_info' %}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-edit me-1"></i>修改资料
                        </a>
                        <a href="{% url 'rbac:logout' %}" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-sign-out-alt me-1"></i>安全退出
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 系统管理入口（仅管理员可见） -->
    {% if current_user.is_superuser %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="fas fa-tools me-2"></i>系统管理
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text mb-3">您拥有系统管理员权限，可以访问以下管理功能：</p>
                    <div class="row g-3">
                        <div class="col-md-3">
                            <a href="{% url 'rbac:user_management' %}" class="btn btn-outline-primary w-100">
                                <i class="fas fa-users d-block mb-1"></i>
                                用户管理
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'rbac:role_list' %}" class="btn btn-outline-success w-100">
                                <i class="fas fa-user-tag d-block mb-1"></i>
                                角色管理
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'rbac:permission_list' %}" class="btn btn-outline-info w-100">
                                <i class="fas fa-shield-alt d-block mb-1"></i>
                                权限管理
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'rbac:menu_list' %}" class="btn btn-outline-warning w-100">
                                <i class="fas fa-bars d-block mb-1"></i>
                                菜单管理
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// 根据时间显示不同的问候语
function updateTimeGreeting() {
    const now = new Date();
    const hour = now.getHours();
    const greetingElement = document.getElementById('timeGreeting');
    const timeElement = document.getElementById('currentTime');
    
    let greeting;
    if (hour < 6) {
        greeting = '夜深了，您辛苦了';
    } else if (hour < 9) {
        greeting = '早上好';
    } else if (hour < 12) {
        greeting = '上午好';
    } else if (hour < 14) {
        greeting = '中午好';
    } else if (hour < 18) {
        greeting = '下午好';
    } else if (hour < 22) {
        greeting = '晚上好';
    } else {
        greeting = '夜晚好';
    }
    
    greetingElement.textContent = greeting;
    
    // 显示当前时间
    const options = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit',
        second: '2-digit'
    };
    timeElement.textContent = now.toLocaleDateString('zh-CN', options);
}

// 计算登录时长
function updateLoginDuration() {
    const loginTime = new Date(); // 这里应该从服务器获取实际登录时间
    const now = new Date();
    const duration = Math.floor((now - loginTime) / 1000 / 60); // 分钟
    
    const durationElement = document.getElementById('loginDuration');
    if (duration < 60) {
        durationElement.textContent = `${duration} 分钟`;
    } else {
        const hours = Math.floor(duration / 60);
        const minutes = duration % 60;
        durationElement.textContent = `${hours} 小时 ${minutes} 分钟`;
    }
}

// 访问菜单
function accessMenu(url, menuName) {
    // 添加访问统计或日志记录
    console.log(`用户访问菜单: ${menuName}`);
    
    // 跳转到目标页面
    window.location.href = url;
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    updateTimeGreeting();
    updateLoginDuration();
    
    // 每30秒更新一次时间
    setInterval(updateTimeGreeting, 30000);
    
    // 每分钟更新一次登录时长
    setInterval(updateLoginDuration, 60000);
    
    // 添加菜单卡片的动画效果
    const menuCards = document.querySelectorAll('.menu-card');
    menuCards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.1}s`;
        card.classList.add('animate__animated', 'animate__fadeInUp');
    });
});

// 页面可见性变化时更新时间
document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        updateTimeGreeting();
        updateLoginDuration();
    }
});
</script>
{% endblock %}